import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import EditPage from '@/components/EditPage';
import DetailPage from '@/components/DetailPage';
import { formItemFragement, queryDict } from '@/utils/common';
import { allDictList } from '@/utils/constans';
import { selectDetail, renderTableAdSelect, allDispatchType, IcCardStatus } from './utils';

@connect(({ iccard, loading, component }) => ({
  icCardDetail: iccard.icCardDetail,
  dictObject: component.dictObject,
  loading: loading.effects[allDispatchType.detail],
}))
export default class DeclareDetail extends Component {
  state = {
    detailId: '',
  };

  componentWillMount() {
    // 查询字典项
    const allDict = [allDictList.manifest_transport, allDictList.manifest_goods,allDictList.declareListType];
    queryDict({ props: this.props, allDict });
  }
  componentDidMount() {
    const { detailId, match } = this.props;
    const currentId = match && match.params.id ? match.params.id : detailId;
    if (!currentId) return;
    this.handleStateChange([{ detailId: currentId }]);
    this.selectDetail();
  }

  selectDetail = () => {
    const { detailId, match } = this.props;
    const currentId = match && match.params.id ? match.params.id : detailId;
    currentId &&
      selectDetail({
        type: allDispatchType.detail,
        payload: { id: currentId },
        props: this.props,
      });
  };

  handleStateChange = (options = []) => {
    options.map(item => {
      this.setState(item);
    });
  };

  render() {
    const { loading, icCardDetail, pageType, match } = this.props;
    const { detailId } = this.state;
    const detail = icCardDetail[detailId] || {};

    const editPageParams = {
      title: detail.name || '',
      panelTitle: ['基础信息'],
    };

    const formItem = [
      [
        <DetailPage label="IC卡名称" value={detail.name} />,
        <DetailPage
          label="默认"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.beDefault,
            data: IcCardStatus,
          })}
        />,
      ],
      [
        <DetailPage label="IC卡cookie信息" value={detail.cookie} />,
        <DetailPage
          label="进出境口岸海关"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.customsCode,
            key: allDictList.manifest_goods,
          })}
        />,
      ],
      [
        <DetailPage label="传输企业备案关区" value={detail.filingAreaCode} />,
        <DetailPage
          label="海关货物通关代码"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.goodsItemCode,
            key: allDictList.manifest_transport,
          })}
        />,
      ],
      [
        <DetailPage label="卸货地代码" value={detail.unloadCode} />,
        <DetailPage label="企业代码" value={detail.enterpriceCode} />,
      ],
      [
        <DetailPage label="舱单传输人名称" value={detail.transprotName} />,
        <DetailPage label="运输工具代理企业代码" value={detail.enterpriceCode} />,
      ],
      [
        <DetailPage label="别名" value={detail.alias} />,
        <DetailPage label="类型" 
        value={
          renderTableAdSelect({
            props: this.props,
            value: detail.type,
            key: allDictList.declareListType,
          })
        } 
        />,
      ],
      [
        <DetailPage label="备注" value={detail.remarks} />,
        
      ],
    ];

    return (
      <Fragment>
        <EditPage {...editPageParams}>
          <Spin spinning={loading}>{formItemFragement(formItem)}</Spin>
        </EditPage>
      </Fragment>
    );
  }
}
